<template>
	<view>
		<status-bar :title='pageData.title' statusHeight hideBg txtColor></status-bar>
		<view class="rows p-re">
			<image :src="$online('bg.png')"  mode="widthFix" class="rows"></image>
			<view class="info d-flex j-sb a-center ">
				<view class="d-flex a-center">
					<image :src="$imgUrls(pageData.head_img)" mode="aspectFill" class="headImg"></image>
					<view class=" d-flex f-column  m-left20">
						<text class="white size28">{{pageData.name}}</text>
						<text class="white h6 m-top12">{{pageData.phone}}</text>
					</view>
				</view>
				<view class="iconfont icon-server white size54" @click="call()"></view>
			</view>
		</view>
		
		<view class="stay">
			<view class="Code flexac" @click="extendBtn">
				<image :src="$online('code.png')"  mode="aspectFill" class="code_Img"></image>
			</view>
			<view class="d-flex f-column" >
				<text class="black size32 bold">待安装 (单)</text>
				<text class="color_2D size40 m-top20">{{pageData.toBeInstalled}}</text>
			</view>
			<view class="row j-sb m-top30">
				<view class="d-flex f-column">
					<text class="black size28">累计安装费 ({{nameDefinition.profitUnit}})</text>
					<text class="color_2D size40 m-top20">{{pageData.allMoney}}</text>
				</view>
				<view class="d-flex f-column" @click="toUrl('/moneyPage/capital/withdraw')">
					<view class="d-flex a-center">
						<text class="black size28 m-right10">可提现 ({{nameDefinition.profitUnit}})</text>
						<view class="iconfont icon-a-zujian32 h6 color_99"></view>
					</view>
					<text class="color_2D size40 m-top20">{{pageData.income}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="viewbox auto d-flex f-wrap m-top50">
			<view class="w-25 d-flex f-column a-center m-top40" @click="toUrl('orders')">
				<image :src="$online('a1.jpg')"  mode="aspectFill" class="anine"></image>
				<text class="size28 color_33 m-top10">全部派单</text>
			</view>
			<view class="w-25 d-flex f-column a-center m-top40" 
			    @click="toUrl('/moneyPage/capital/brokerage_list')">
				<image :src="$online('a2.jpg')"  mode="aspectFill" class="anine"></image>
				<text class="size28 color_33 m-top10">收益明细</text>
			</view>
			<view class="w-25 d-flex f-column a-center m-top40" 
			     @click="toUrl('/moneyPage/capital/addBank')">
				<image :src="$online('a3.jpg')"  mode="aspectFill" class="anine"></image>
				<text class="size28 color_33 m-top10">银行卡管理</text>
			</view>
			<view class="w-25 d-flex f-column a-center m-top40" 
			     @click="toUrl('/privatePage/single/goodsShare')">
				<image :src="$online('a4.jpg')"  mode="aspectFill" class="anine"></image>
				<text class="size28 color_33 m-top10">商品分享</text>
			</view>
			<view class="w-25 d-flex f-column a-center m-top40" @click="extendBtn">
				<image :src="$online('a5.jpg')"  mode="aspectFill" class="anine"></image>
				<text class="size28 color_33 m-top10">推广名片</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				pageData:'',
			}
		},
		onLoad() {
			this.apiStaffInfo();
		},
		methods: {
			apiStaffInfo(){
				this.$http.post({
					url:'/dispatch/apiStaffInfo',
				}).then(res=>{
					if(res.code != 100) return this.$Toast(res.msg,2);
					this.pageData = res.data;
				})
			},
			extendBtn(){
				this.toUrl(`extend?pageData=${JSON.stringify(this.pageData)}`)
			}
		},
		computed:{
			...mapState(['startUp','nameDefinition','share'])
		},
		onShareAppMessage(){
		    return {
		        title: this.share.title,
				desc: this.share.desc,
		        path: `/pages/index/index?share_v_id=${this.vid}`,
				imageUrl: `${this.share.imageUrl}`
		    }
		}
	}
</script>

<style lang="scss" scoped>
	.info{
		width:100%;
		box-sizing: border-box;
		padding:0 30rpx;
		position: absolute;
		top:180rpx;
		left:0;
		z-index:10;
	}
	.headImg{
		width:90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	.stay{
		width:690rpx;
		background-color: #fff;
		margin:-140rpx auto 0 auto;
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
		border-radius: 6rpx;
		padding:20rpx;
		position: relative;
		z-index:200;
	}
	.Code{
		width: 88rpx;
		height: 80rpx;
		background: #2D77FF;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		position: absolute;
		top:0;
		right:20rpx;
	}
	.code_Img{
		width:40rpx;
		height: 40rpx;
	}
	.anine{
		width: 88rpx;
		height: 80rpx;
		border-radius: 6rpx;
	}
</style>